<template>
    <el-card shadow="hover" class="list-margin-bottom list-margin-top">
        <el-descriptions v-if="data" border>
            <template #title>
                <div style="
                        height: 40px;
                        width: 100%;
                        position: relative;
                        overflow: hidden;
                      ">
                    <el-text line-clamp="2" v-html="hightlightlink(data.name)"></el-text>
                </div>
            </template>
            <el-descriptions-item label="创建人">{{
                data.creator ? data.creator.name : ""
                }}</el-descriptions-item>
            <el-descriptions-item label="优先级">
                <el-text :type="(data.priority === 2) ? 'warning' : (data.priority === 3) ? 'danger' : 'default'">
                    {{ find_object_val(priority_options, 'value', data.priority)['label'] }}
                </el-text>
            </el-descriptions-item>
            <el-descriptions-item label="指派给">
                <el-space>
                    <el-tag :disable-transitions="true" v-if="data.assign && data.assign.length > 0"
                        v-for="it in data.assign" :key="it">{{ it }}</el-tag>
                    <el-tag :disable-transitions="true" v-else type="error">
                        暂无
                    </el-tag>
                </el-space>
            </el-descriptions-item>
            <el-descriptions-item label="工作量">
                <el-text type="success">
                    {{ data.workload }}
                </el-text>
            </el-descriptions-item>
            <el-descriptions-item label="任务归属">{{
                data.revert
                }}</el-descriptions-item>
            <el-descriptions-item label="状态">
                <!-- <el-select :disabled="data.status.value === 5" tag-type="success" @focus="load_options"
                    v-model="data.status" placeholder="任务状态" style="width: 170px">
                    <el-option v-for="item in status_option.options" :key="data.value" :label="data.label"
                        :value="item.value" />
                </el-select> -->
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
                {{ _Time(data.create_datetime) }}
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">
                <el-date-picker v-model="data.start_time" type="date" unlink-panels />
            </el-descriptions-item>
            <el-descriptions-item label="完成时间">
                <el-space>
                    <el-date-picker v-model="data.end_time" type="date" unlink-panels />
                    <!-- <el-tag disable-transitions="false" type="danger" size="large" v-if="data.is_expire" effect="dark">
                        <span class="stand-font-size">延期</span>
                    </el-tag> -->
                </el-space>
            </el-descriptions-item>
            <el-descriptions-item label="最近更新时间">
                <el-text> {{ _Time(data.modify_time) }} </el-text>
            </el-descriptions-item>
            <el-descriptions-item label="描述" label-position="top" span="2" rowspan="1">
                <div class="descript">
                    <el-row flex justify="left">
                        <el-col :span="2">
                            <el-button @click="edit_content(data)" type="info" link text>
                                <el-icon>
                                    <Edit />
                                </el-icon>
                                编辑
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <e-col v-if="data.rich_content && data.rich_content.code === 200" :span="24"
                            class="rich_content-item">
                            <div v-html="data.rich_content.content" class="w-e-text-container"></div>
                        </e-col>
                        <e-col v-else :span="24" class="stand-font-size">
                            暂无描述
                        </e-col>
                    </el-row>
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
</template>
<script setup>
import { ref, watch } from 'vue';
import { URL, get as http_get, str_utils, find_object_val,TimeFormatter } from '@/tool/common.js';
import { useRoute } from 'vue-router';
const data = ref();
const route = useRoute();
const no_data = ref(true);

// 时间
function _Time(d) {
    if (!d) {
        return;
    }
    let _formtter = TimeFormatter(d);
    return _formtter.get_date("-", "-") + " " + _formtter.get_time();
}
// 高亮处理
function hightlightlink(str) {
    if (str_utils.is_empty(str)) {
        return str;
    }
    const res = str.match(/#\d{1,6}/g);
    const _str = str.replace(/#\d{1,6}/g, "");
    if (res) {
        return `<span> <a target="_blank" class='hight-light-link' href='https://g66.pm.netease.com/v6/issues/${res[0]}'> ${res[0]} <a/> ${_str} </span>`;
    } else {
        return str;
    }
}

watch(route.query.id, () => { query_detail(route.query.id) }, { immediate: true });
function query_detail(id) {
    if (id) {
        http_get({
            url: URL.BASE + URL.CHILD_DETAIL + "?id=" + id
        }).then(res => {
            if (res && typeof 'object') {
                data.value = res;
                no_data.value = false;
            } else {
                no_data.value = true;
            }
        }).catch(err => {
            console.log("返回", err);
            no_data.value = true;
        })
    } else {
        no_data.value = true;
    }
}
</script>
<style lang="scss"></style>